/**
 * @description 商品详情
 */
import style from './styles/Detail.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button, ButtonGroup, Toast, Dialog } from 'wd-mobile';

import { detail } from "api_zhoujianyi/front/app/order";
import { detail as goodsDetail } from "api_liuhaojie/app/goods";
import { query_tips } from "api_xukaiyu/app/content";
import { cancel } from "api_zhoujianyi/front/app/trade/purchase";

import wxShare from "commons/wxShare";
import util from "commons/util";
let query = util.parseQueryString();

import icon_after_sale from "images/icon/after_sale.png";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            detail: {},
            query_tips: ""
        }
    }
    componentDidMount() {
        // 查询订单详情
        detail({
            orderNo: this.props.match.params.orderNo
        }).then(res => {
            this.setState({
                detail: res.data
            })
            return res.data;
        }).then(data => {
            // 查询商品详情
            goodsDetail({
                skuId: data.goodsType
            }).then(res => {
                // 设置分享到商品
                let shareData = {};
                let pathNameArr = location.pathname.split("/");
                pathNameArr.pop();
                shareData.link = location.origin + pathNameArr.join("/") + "/goods.html" + `#/Detail/${res.data.id}`;
                shareData.title = `${res.data.skuName}仅需￥${res.data.price}元，已有${res.data.soldNum}人抢购！`;
                shareData.desc = "数量有限，先到先得。新人更可享受1分钱换购电影券";
                shareData.imgUrl = res.data.goodsIcon;
                wxShare(shareData);
            })
        })

        // 查询温馨提示
        query_tips().then(res => {
            this.setState({
                query_tips: res.data
            })
        })
    }
    render() {
        return (
            <Fragment>
                <div className={classnames(style.main, "x-scroll-y")}>
                    <div className={style.kv}>
                        <div className={style.goodsLogo} style={this.state.detail.goodsIcon ? { backgroundImage: `url(${this.state.detail.goodsIcon})` } : null}></div>
                        <div className={style.goodsName}>{this.state.detail.goodsName}</div>
                    </div>
                    <div className={style.goodsInfo}>
                        <div className={style.price}>
                            <span className={style.currentPrice}>￥{this.state.detail.goodsPrice}</span>
                            <span className={style.originPrice}>￥{this.state.detail.goodsRecommendPrice}</span>
                        </div>
                    </div>
                    <div className={style.describe}>
                        <div className={style.describePart}>
                            <div className={style.describePartTitle}>
                                商品详情
                            </div>
                            <div className={style.describePartContent}  dangerouslySetInnerHTML={{ __html: this.state.detail.instructions  }}></div>
                        </div>
                        <div className={style.describePart}>
                            <div className={style.describePartTitle}>
                                温馨提示
                            </div>
                            <div className={style.describePartContent} dangerouslySetInnerHTML={{ __html: util.replaceUrl(this.state.query_tips) || "" }}>
                            </div>
                        </div>
                    </div>
                </div>
                {
                    (this.state.detail.status != "WAIT_REFUND" && this.state.detail.status != "WAIT_PAY" && this.state.detail.status != "CANCELED" && this.state.detail.status != "REFUNDED" && !!this.state.detail.status) && <div className={style.buyBar}>
                        <div className={style.buyButtons}>
                            {
                                this.state.detail.status == "WAIT_RECEIPT" && <div className={style.like} onClick={() => {
                                    location.href = `./order.html#/AfterSale/${this.state.detail.orderNo}`
                                }}>
                                    <img src={icon_after_sale} alt="" />
                                    <span>申请售后</span>
                                </div>
                            }
                            <Button className={classnames(style.toBuy, {
                                [style.block]: this.state.detail.status != "WAIT_RECEIPT"
                            })} onClick={() => {
                                location.href = `./couponCode.html?orderNo=${this.state.detail.orderNo}`
                            }}>查看券码</Button>
                        </div>
                    </div>
                }
                {
                    (!!this.state.detail.status && this.state.detail.status == "WAIT_PAY") && <div className={style.buyBar}>
                        <div className={style.buyButtons}>
                            <ButtonGroup radius>
                                <Button className={classnames(style.toBuyGroupItem, style.toBuyToPay)} onClick={() => {
                                    location.href = `./goods.html?#/Pay/${this.state.detail.tradeNo}`
                                }}>继续支付</Button>
                                <Button className={classnames(style.toBuyGroupItem, style.toBuyToCancle)} onClick={() => {
                                    if (query.quantity > 1) {
                                        Dialog.confirm(`本笔订单${query.quantity}个商品会同时取消，请确认是否取消 `, '取消订单', undefined, {
                                            onOk: () => {
                                                this.cancel(this.state.detail.tradeNo);
                                            },
                                            onCancel: () => { },
                                            buttons: { '确认': true, '放弃': false }
                                        })
                                    } else {
                                        this.cancel(this.state.detail.tradeNo);
                                    }
                                }}>取消订单</Button>
                            </ButtonGroup>
                        </div>
                    </div>
                }
            </Fragment>
        )
    }

    // 取消订单
    cancel(tradeNo) {
        cancel({
            tradeNo: tradeNo
        }).then(res => {
            Toast.info("取消成功", 1500, () => {
                history.back();
            });
        })
    }
}

export default App;